import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { 
  ArrowLeft, HelpCircle, Book, MessageCircle, 
  Star, Bug, Lightbulb, Mail, Github, 
  Smartphone, Bell, Brain,
  ChevronDown, ChevronRight, ExternalLink
} from 'lucide-react'
import { getVersionString } from '../utils/version'

interface FAQItem {
  question: string
  answer: string
  category: 'basic' | 'pwa' | 'ai' | 'notification' | 'advanced'
}

const faqs: FAQItem[] = [
  // 基础使用
  {
    category: 'basic',
    question: '如何创建一个新任务？',
    answer: '点击底部导航栏的"新建"按钮，或在首页点击"+"按钮。您可以直接输入任务描述，AIDE会智能解析时间、优先级等信息。'
  },
  {
    category: 'basic',
    question: '如何设置任务的截止时间？',
    answer: '在创建任务时，您可以直接在描述中写入时间，如"明天下午3点开会"。AIDE会自动识别并设置截止时间。您也可以点击时间选择器手动设置。'
  },
  {
    category: 'basic',
    question: '如何查看和管理重复任务？',
    answer: '在个人中心点击"重复任务"可以查看所有重复任务。您可以编辑重复规则、暂停或删除重复任务。'
  },
  
  // PWA相关
  {
    category: 'pwa',
    question: '什么是PWA？如何安装AIDE到桌面？',
    answer: 'PWA是渐进式Web应用，让网页应用具备原生应用的体验。在Chrome等浏览器中，地址栏会显示安装图标，点击即可安装到桌面。安装后可以像普通软件一样使用。'
  },
  {
    category: 'pwa',
    question: '安装后有什么优势？',
    answer: '安装后您可以享受：独立窗口运行、更快的启动速度、系统级通知、离线基本功能、桌面快捷方式等原生应用体验。'
  },
  {
    category: 'pwa',
    question: 'AIDE可以离线使用吗？',
    answer: '是的！AIDE支持离线缓存，即使断网也可以查看已缓存的任务、创建新任务（稍后同步）、使用基本功能。'
  },
  
  // AI功能
  {
    category: 'ai',
    question: 'AIDE的AI功能有哪些？',
    answer: 'AIDE的AI功能包括：智能时间解析、任务优先级建议、任务分解建议、个性化提醒时间、使用习惯分析等。'
  },
  {
    category: 'ai',
    question: '为什么AI有时解析不准确？',
    answer: 'AI解析基于自然语言处理，可能受到语言表达习惯影响。您可以尝试更明确的表达，如"明天下午3点"而不是"明天"。系统会不断学习改进。'
  },
  
  // 通知功能
  {
    category: 'notification',
    question: '为什么收不到通知？',
    answer: '请检查：1) 浏览器通知权限是否开启；2) 系统通知是否允许；3) 在通知设置页面确认相关功能已开启；4) 任务是否设置了提醒时间。如果是PWA推送通知，请确保网络环境能访问推送服务。'
  },
  {
    category: 'notification',
    question: '普通通知和PWA推送通知有什么区别？',
    answer: '普通通知只在浏览器打开时工作；PWA推送通知即使应用关闭也能接收，但需要网络连接到推送服务。如果PWA推送无法使用，基础通知功能仍然可用。'
  },
  {
    category: 'notification',
    question: '如何自定义通知设置？',
    answer: '在"通知设置"页面，您可以：1) 选择通知类型（任务提醒、逾期提醒等）；2) 设置提醒时间；3) 开启/关闭通知声音和震动；4) 配置PWA推送通知。'
  },
  
  // 高级功能
  {
    category: 'advanced',
    question: '如何导出我的数据？',
    answer: '在个人中心点击"导出数据"可以下载JSON格式的任务数据。在设置页面也可以导出应用设置。'
  },
  {
    category: 'advanced',
    question: '数据安全吗？会被泄露吗？',
    answer: '您的数据存储在本地和您授权的云端，采用加密传输。我们不会访问或分享您的个人任务数据。'
  }
]

const categories = [
  { id: 'basic', name: '基础使用', icon: Book, color: 'text-blue-600 bg-blue-50' },
  { id: 'pwa', name: 'PWA应用', icon: Smartphone, color: 'text-indigo-600 bg-indigo-50' },
  { id: 'ai', name: 'AI功能', icon: Brain, color: 'text-purple-600 bg-purple-50' },
  { id: 'notification', name: '通知提醒', icon: Bell, color: 'text-orange-600 bg-orange-50' },
  { id: 'advanced', name: '高级功能', icon: Star, color: 'text-green-600 bg-green-50' }
]

export default function HelpPage() {
  const navigate = useNavigate()
  const [activeCategory, setActiveCategory] = useState<string>('basic')
  const [expandedFAQ, setExpandedFAQ] = useState<number | null>(null)
  const [feedbackType, setFeedbackType] = useState<'bug' | 'feature' | 'general'>('general')
  const [feedbackText, setFeedbackText] = useState('')

  const filteredFAQs = faqs.filter(faq => faq.category === activeCategory)

  const handleSubmitFeedback = () => {
    if (!feedbackText.trim()) {
      alert('请输入反馈内容')
      return
    }

    // 构造邮件内容
    const subject = `AIDE反馈 - ${feedbackType === 'bug' ? '问题报告' : feedbackType === 'feature' ? '功能建议' : '一般反馈'}`
    const body = `反馈类型：${feedbackType === 'bug' ? '问题报告' : feedbackType === 'feature' ? '功能建议' : '一般反馈'}

反馈内容：
${feedbackText}

---
用户信息：
浏览器：${navigator.userAgent}
时间：${new Date().toLocaleString()}
版本：AIDE v1.0.0`

    // 打开邮件客户端
    const mailtoLink = `mailto:feedback@aide.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`
    window.open(mailtoLink)

    // 清空表单
    setFeedbackText('')
    alert('感谢您的反馈！邮件客户端已打开，请发送邮件。')
  }

  return (
    <div className="min-h-screen bg-slate-50">
      {/* Header */}
      <header className="sticky top-0 bg-white/95 backdrop-blur-sm shadow-sm border-b border-slate-200/60 z-10">
        <div className="flex items-center justify-between px-4 py-3 max-w-md mx-auto">
          <button
            onClick={() => navigate('/profile')}
            className="p-2 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-all touch-manipulation"
          >
            <ArrowLeft size={20} />
          </button>
          <h1 className="text-lg font-semibold text-slate-900">帮助与反馈</h1>
          <div className="w-9 h-9" />
        </div>
      </header>

      <main className="px-4 pb-6 max-w-md mx-auto">
        {/* 快速入门 */}
        <div className="bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl p-5 text-white mt-4 mb-6">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
              <HelpCircle size={20} />
            </div>
            <div>
              <h2 className="text-lg font-semibold">欢迎使用AIDE！</h2>
              <p className="text-blue-100 text-sm">AI驱动的智能任务管理工具</p>
            </div>
          </div>
          <div className="space-y-2 text-sm text-blue-100">
            <p>• 🤖 直接描述任务，AI自动解析时间和优先级</p>
            <p>• 📱 支持PWA安装，像原生应用一样使用</p>
            <p>• 🔔 智能提醒，不错过重要任务</p>
            <p>• 🔄 重复任务自动化管理</p>
          </div>
        </div>

        {/* 分类导航 */}
        <div className="mb-6">
          <h3 className="text-sm font-semibold text-slate-900 mb-3">常见问题分类</h3>
          <div className="grid grid-cols-2 gap-2">
            {categories.map(category => (
              <button
                key={category.id}
                onClick={() => setActiveCategory(category.id)}
                className={`flex items-center gap-2 p-3 rounded-xl border transition-all ${
                  activeCategory === category.id
                    ? 'border-blue-500 bg-blue-50 text-blue-700'
                    : 'border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50'
                }`}
              >
                <div className={`p-1.5 rounded-lg ${category.color}`}>
                  <category.icon size={16} />
                </div>
                <span className="text-sm font-medium">{category.name}</span>
              </button>
            ))}
          </div>
        </div>

        {/* FAQ列表 */}
        <div className="mb-6">
          <h3 className="text-sm font-semibold text-slate-900 mb-3">
            {categories.find(c => c.id === activeCategory)?.name} 问答
          </h3>
          <div className="space-y-3">
            {filteredFAQs.map((faq, index) => (
              <div key={index} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                <button
                  onClick={() => setExpandedFAQ(expandedFAQ === index ? null : index)}
                  className="w-full flex items-center justify-between p-4 text-left hover:bg-slate-50 transition-colors"
                >
                  <span className="font-medium text-slate-900 pr-2">{faq.question}</span>
                  {expandedFAQ === index ? (
                    <ChevronDown size={20} className="text-slate-400 flex-shrink-0" />
                  ) : (
                    <ChevronRight size={20} className="text-slate-400 flex-shrink-0" />
                  )}
                </button>
                {expandedFAQ === index && (
                  <div className="px-4 pb-4 text-sm text-slate-600 border-t border-slate-100">
                    <div className="pt-3">{faq.answer}</div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* 反馈表单 */}
        <div className="bg-white rounded-2xl border border-slate-200 p-5 mb-6">
          <h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
            <MessageCircle size={20} />
            意见反馈
          </h3>
          
          <div className="space-y-4">
            {/* 反馈类型 */}
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">反馈类型</label>
              <div className="grid grid-cols-3 gap-2">
                {[
                  { value: 'bug', label: '问题报告', icon: Bug, color: 'text-red-600 bg-red-50' },
                  { value: 'feature', label: '功能建议', icon: Lightbulb, color: 'text-yellow-600 bg-yellow-50' },
                  { value: 'general', label: '一般反馈', icon: MessageCircle, color: 'text-blue-600 bg-blue-50' }
                ].map(type => (
                  <button
                    key={type.value}
                    onClick={() => setFeedbackType(type.value as any)}
                    className={`flex flex-col items-center gap-1 p-3 rounded-xl border transition-all ${
                      feedbackType === type.value
                        ? 'border-blue-500 bg-blue-50 text-blue-700'
                        : 'border-slate-200 hover:border-slate-300 hover:bg-slate-50'
                    }`}
                  >
                    <div className={`p-1.5 rounded-lg ${type.color}`}>
                      <type.icon size={16} />
                    </div>
                    <span className="text-xs font-medium">{type.label}</span>
                  </button>
                ))}
              </div>
            </div>

            {/* 反馈内容 */}
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">详细描述</label>
              <textarea
                value={feedbackText}
                onChange={(e) => setFeedbackText(e.target.value)}
                placeholder={
                  feedbackType === 'bug' 
                    ? '请详细描述遇到的问题，包括操作步骤和期望结果...'
                    : feedbackType === 'feature'
                    ? '请描述您希望添加的功能，以及使用场景...'
                    : '请告诉我们您的想法和建议...'
                }
                rows={4}
                className="w-full p-3 border border-slate-300 rounded-xl resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>

            <button
              onClick={handleSubmitFeedback}
              className="w-full flex items-center justify-center gap-2 bg-blue-600 text-white py-3 px-4 rounded-xl hover:bg-blue-700 transition-colors"
            >
              <Mail size={18} />
              发送反馈
            </button>
          </div>
        </div>

        {/* 联系方式 */}
        <div className="bg-white rounded-2xl border border-slate-200 p-5">
          <h3 className="text-lg font-semibold text-slate-900 mb-4">联系我们</h3>
          <div className="space-y-3">
            <a
              href="mailto:support@aide.com"
              className="flex items-center gap-3 p-3 bg-blue-50 border border-blue-200 rounded-xl hover:bg-blue-100 transition-colors"
            >
              <Mail size={18} className="text-blue-600" />
              <div>
                <div className="font-medium text-blue-900">邮箱支持</div>
                <div className="text-sm text-blue-600">support@aide.com</div>
              </div>
              <ExternalLink size={16} className="text-blue-400 ml-auto" />
            </a>

            <a
              href="https://github.com/aide-app/aide"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-3 p-3 bg-gray-50 border border-gray-200 rounded-xl hover:bg-gray-100 transition-colors"
            >
              <Github size={18} className="text-gray-600" />
              <div>
                <div className="font-medium text-gray-900">开源项目</div>
                <div className="text-sm text-gray-600">GitHub仓库</div>
              </div>
              <ExternalLink size={16} className="text-gray-400 ml-auto" />
            </a>
          </div>
        </div>

        {/* 版本信息 */}
        <div className="text-center py-6 text-xs text-slate-400">
          <p>AIDE {getVersionString()} • PWA支持</p>
          <p className="mt-1">感谢您使用AIDE智能任务助手</p>
        </div>
      </main>
    </div>
  )
}
